<template>
    <div class="follow-list">
      <div v-for="(record, index) in followRecords" :key="index" class="record-item">
        <img :src="GetHeadImage(record.headimg)" alt="头像" class="headimg" />
        <div class="record-details">
          <div class="username">{{ record.username }}</div>
          <div class="follow-message">{{ record.message }} <span class="timestamp">{{ record.timestamp }}</span></div>
        </div>
        <button
          :class="getButtonClass(record)"
          class="follow-button"
          @click="toggleFollow(record)"
        >
          {{ getButtonText(record) }}
        </button>
      </div>
    </div>
  </template>
  
  <script setup>
  import { defineProps, ref } from 'vue';
  const GetHeadImage = (imgsrc) => new URL(imgsrc, import.meta.url).href;
  const props = defineProps({
    followRecords: {
      type: Array,
      required: true,
    },
  });
  
  // 使用 ref 存储关注记录状态
  const followRecords = ref(props.followRecords);
  
  const getButtonClass = (record) => {
    if (!record.followedByMe) {
      return 'red-button';
    } else {
      return 'white-button';
    }
  };
  
  const getButtonText = (record) => {
    if (!record.followedByMe && record.followsMe) {
      return '回关';
    } 
    else  
    {
      return '互相关注';
    } 
  };
  
  // 切换关注状态
  const toggleFollow = (record) => {
    if (!record.followedByMe && record.followsMe) {
      record.followedByMe = true;
    } else if (record.followedByMe && record.followsMe) {
      record.followedByMe = false;
    }
  };
  </script>
  
  <style scoped>
  .follow-list {
    padding: 20px;
  }
  .record-item {
    display: flex;
    align-items: center;
    margin: 10px 0;
  }
  .headimg {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 10px;
  }
  .record-details {
    flex: 1;
  }
  .username {
    font-weight: bold;
  }
  .follow-message {
    font-size: 14px;
  }
  .follow-button {
    padding: 5px 10px;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    width: 100px; /* 统一按钮长度 */
  }
  .red-button {
    background-color: red;
    color: white;
  }
  .white-button {
    background-color: white;
    color: black;
  }
  </style>
  